// 可以通过dom来获取选择到的文件
const selectedFile = document.getElementById("input1").files;
console.log("文件个数：", selectedFile.length);

// 通过change事件访问被选择的文件
document.getElementById("input2").addEventListener("change", handleFiles, false);
function handleFiles() {
  // 获取文件列表
  const fileList = this.files;
  console.log("选择了", fileList.length, "个文件");

  for (let i = 0; i < fileList.length; i++) {
    const file = fileList[i];
    console.log("name:", file.name, "; size:", file.size, "B", "; type:", file.type);
  }
}
// ------------------------------------------------------------
// 隐藏input元素实现文件选择，通过按钮点击
const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener(
  "click",
  (e) => {
    if (fileElem) {
      fileElem.click();
    }
  },
  false
);
fileElem && fileElem.addEventListener("change", handleFiles, false);
// ------------------------------------------------------------
// 使用拖放来选择文件
let dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  const dt = e.dataTransfer;
  const files = dt.files;

  handleDropFiles(files);
}

function handleDropFiles(files) {
  console.log("选择了", files.length, "个文件");

  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    console.log("name:", file.name, "; size:", file.size, "B", "; type:", file.type);
  }
}

// ------------------------------------------------------------
// 显示用户选择的图片的缩略图
document.getElementById("input3").addEventListener("change", handleFilesPreview, false);
const previewEle = document.getElementById("preview");
function handleFilesPreview() {
  const fileList = this.files;
  for (let i = 0; i < fileList.length; i++) {
    const file = fileList[i];

    if (!file.type.startsWith("image/")) {
      continue;
    }

    const img = document.createElement("img");
    img.classList.add("obj");
    img.file = file; // 这样做可以让我们拿到稍后需要实际上传的图片
    previewEle.appendChild(img); // previewEle 就是用来显示内容的 div

    const reader = new FileReader();
    reader.onload = (e) => {
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  }
}

// ------------------------------------------------------------
// 使用对象 URL 来显示图片
const fileSelect4 = document.getElementById("fileSelect4"),
  fileEle4 = document.getElementById("input4"),
  fileList = document.getElementById("fileList");

fileSelect4.addEventListener(
  "click",
  (e) => {
    if (fileEle4) {
      fileEle4.click();
    }
    e.preventDefault(); // 避免导航至“#”
  },
  false
);

fileEle4.addEventListener("change", handleFilesToURL, false);

function handleFilesToURL() {
  if (!this.files.length) {
    fileList.innerHTML = "<p>没有选择任何文件！</p>";
  } else {
    fileList.innerHTML = "";
    const list = document.createElement("ul");
    fileList.appendChild(list);
    for (let i = 0; i < this.files.length; i++) {
      const li = document.createElement("li");
      list.appendChild(li);

      const img = document.createElement("img");
      img.src = URL.createObjectURL(this.files[i]);
      img.height = 60;
      img.onload = () => {
        URL.revokeObjectURL(img.src);
      };
      li.appendChild(img);
      const info = document.createElement("span");
      info.innerHTML = `${this.files[i].name}: ${this.files[i].size} bytes`;
      li.appendChild(info);
    }
  }
}

// ------------------------------------------------------------

// const reader = new FileReader();

// reader.onload = (evt) => {
//   // 该事件在读取操作完成时触发
//   console.log(evt.target.result);
// };

// // 将文件内容读取为字符串
// reader.readAsText(file);
// // 将文件内容读取为 ArrayBuffer 数据对象
// reader.readAsArrayBuffer();
// // 将文件内容读取为原始二进制数据
// reader.readAsBinaryString(); // 非标准方法
// // 将文件内容读取为包含一个data: URL 格式的 Base64 字符串
// reader.readAsDataURL();
